<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>比赛/投票详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="" />
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
    <!-- /css files -->
    <link href="${ctx}/static/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all" />
    <link href="${ctx}/static/css/font-awesome.min.css" rel="stylesheet" type="text/css" media="all" />
    <link href="${ctx}/static/css/typo.css" rel="stylesheet" type="text/css" media="all"/>
    <link href="${ctx}/static/css/portfolio.css" rel="stylesheet" type="text/css" media="all"/>
    <link href="${ctx}/static/css/serv.css" rel="stylesheet" type="text/css" media="all"/>
    <link href="${ctx}/static/css/nav.css" rel="stylesheet" type="text/css" media="all"/>
    <link href="${ctx}/static/css/style.css" rel="stylesheet" type="text/css" media="all"/>
    <!-- js files -->
    <script src="${ctx}/static/js/modernizr.custom.js"></script>
    <!-- /js files -->

    <%--show_some_image_js_and_css--%>
    <%--
        <link href='http://fonts.useso.com/css?family=Archivo+Narrow:400,700' rel='stylesheet' type='text/css'>
    --%>
    <!--fonts-->
    <!--link css-->
    <link rel="stylesheet" type="text/css" href="${ctx}/static/show_some_image/css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="${ctx}/static/show_some_image/css/demo.css" />

    <!--coustom css-->
    <link href="${ctx}/static/show_some_image/css/style.css" rel="stylesheet" type="text/css"/>
    <!--default-js-->
    <script src="${ctx}/static/show_some_image/js/jquery-2.1.4.min.js"></script>
    <!--bootstrap-js-->
    <script src="${ctx}/static/show_some_image/js/bootstrap.min.js"></script>
    <!--script-->
</head>
</head>
<body>
<!-- banner section -->
<section class="banner-w3ls">
    <div class="container">
        <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3500" data-pause="false">
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <div class="carousel-caption">
                        <h3>校园十佳歌手大赛</h3>
                        <span class="line-w3ls"></span>
                        <p>2018.6.30火热开唱，为你喜欢的选手投票助威</p>
                    </div>
                </div>
                <div class="item">
                    <div class="carousel-caption">
                        <h3>重庆市第十三届国际歌曲明星赛</h3>
                        <span class="line-w3ls"></span>
                        <p>&nbsp;&nbsp;全城火热投票中······</p>
                    </div>
                </div>

            </div>
        </div><!-- /.carousel -->
    </div>
</section>
<!-- /banner section -->
<!-- navigation -->
<section class="navigation">
    <div class="container">
        <div class="row">
            <div class="col-lg-5 col-md-5 col-sm-5 nav-w3ls1">
                <div class="logo">
                    <a href="index.jsp" class="logo-w3ls"><h1>生命蓝在线投票系统</h1></a>
                </div>
            </div>
            <div class="col-lg-7 col-md-7 col-sm-7 nav-w3ls2">
                <div class="main clearfix">
                    <nav id="menu" class="nav">
                        <ul>
                            <li >
                                <a href="${ctx}/user/toindex">
                                    <span class="icon"><i aria-hidden="true" class="icon-home"></i></span>
                                    <span>首页</span>
                                </a>
                            </li>
                            <li>
                                <a href="${ctx}/user/tomatch">
                                    <span class="icon"><i aria-hidden="true" class="icon-services"></i></span>
                                    <span>投票活动</span>
                                </a>
                            </li>


                            <c:if test="${user==null}">
                                <li>
                                    <a href="${ctx}/user/toLogin">
                                        <span class="icon"><i aria-hidden="true" class="icon-portfolio"></i></span>
                                        <span>登陆</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="${ctx}/user/toRegist">
                                        <span class="icon"><i aria-hidden="true" class="icon-team"></i></span>
                                        <span>注册</span>
                                    </a>
                                </li>
                            </c:if>

                            <c:if test="${user!=null}">
                                <li>
                                    <a href="#">
                                        <span class="icon"><i aria-hidden="true" class="icon-portfolio"></i></span>
                                        <span>${user.name}</span>
                                    </a>
                                </li>

                                <li>
                                    <a href="${ctx}/user/outLogin">
                                        <span class="icon"><i aria-hidden="true" class="icon-team"></i></span>
                                        <span>注销</span>
                                    </a>
                                </li>
                            </c:if>

                            <li>
                                <a href="#">
                                    <span class="icon"><i aria-hidden="true" class="icon-contact"></i></span>
                                    <span>关于我们</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="service-w3ls">
    <h3 class="text-center w3layouts w3 w3l w3ls agileits-w3layouts agile w3-agile">${matchPkInfo2.matchName}</h3>
    <h4 style="text-align: center;margin: 0px 0px 20px 0px;">${matchPkInfo2.matchTime}</h4>

    <section class="stats">
        <div class="container">

            <div class="row" style="text-align: center;padding-left: 200px;">
                <div class="col-md-3 col-sm-3 stats-grid stats-grid-1">
                    <div class="numscroller" data-slno='1' data-min='5835' data-max='6235' data-delay='3' data-increment="1">1</div>
                    <h4>访问人数</h4>
                    <span class="divider1"></span>
                </div>
                <div class="col-md-3 col-sm-3 stats-grid stats-grid-2">
                    <div class="numscroller" data-slno='1' data-min='4866' data-max='5266' data-delay='3' data-increment="1">95</div>
                    <h4>参与人数</h4>
                    <span class="divider1"></span>
                </div>
                <div class="col-md-3 col-sm-3 stats-grid stats-grid-3">
                    <div class="numscroller" data-slno='1' data-min='9258' data-max='9658' data-delay='3' data-increment="1">80</div>
                    <h4>累计投票数</h4>
                </div>

            </div>
        </div>
    </section>


    <div class="container">
        <div style="width: 70%;height: 300px;margin-left: 15%">
            <p style="font-size: 20px;color: black;">
            ${matchPkInfo.matchInfo}
            </p>
            <br>
            <p style="font-weight: bold;font-size: 24px;text-align: center">${matchPkInfo.matchName}比赛赛制<p><br><br>
           <p>1、决赛晋级人数16人分为4组每组4人，根据半决赛成绩抽签决定组别和出场顺序，第一轮比赛按组内排名，前两名直接晋级十佳歌手，最后一名直接淘汰，剩余4名进入第二轮，第一轮晋级8人，待定4人，淘汰4人。
           </p><br>
            <p>2、进入第二轮的选手按照第一轮的成绩由低到高依次演唱，所有选手演唱完毕得分最高者晋级十佳歌手，最低者淘汰，剩余2名进入第三轮，本轮晋级1人，待定两人，淘汰一人。
            </p><br>
            <p>3、进入第三轮的各位选手按照第二轮比赛成绩由低到高清唱，时间为1分钟得分高者晋级，得分低者淘汰，本轮晋级一人，淘汰一人。
            </p><br>
        </div>
    </div>
</section>


<!-- testimonial section -->
<section class="testimonials">
    <h3 class="text-center agileits agileinfo wthree w3-agileits">选手简介</h3>
    <p class="text-center agileits agileinfo wthree w3-agileits">选手独白  我们在一起交流</p>
    <div class="container">
        <div id="myCarousel1" class="carousel slide" data-ride="carousel" data-interval="3000" data-pause="hover">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <c:forEach items="${playerList}" var="player" varStatus="index">

                    <c:if test="${index.index==0}">
                        <li data-target="#myCarousel1" data-slide-to="${index.index}" class="active"></li>
                    </c:if>
                    <c:if test="${index.index!=0}">
                        <li data-target="#myCarousel1" data-slide-to="${index.index}" ></li>
                    </c:if>
                </c:forEach>
            </ol>
            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <c:forEach items="${playerList}" var="player" varStatus="index">
                    <c:if test="${index.index==0}">
                        <div class="item active">
                            <blockquote>${player.playerInfo}</blockquote>
                            <img src="${player.playerImage}" alt="test1" class="img-responsive test" style="height: 150px;width: 150px;border-radius: 75px">
                            <h4 class="text-center"><span>${player.playerName} </span> 歌手</h4>
                        </div>
                    </c:if>
                    <c:if test="${index.index!=0}">
                    <div class="item">
                        <blockquote >${player.playerInfo}</blockquote>
                        <img src="${player.playerImage}" alt="test1" class="img-responsive test" style="height: 150px;width: 150px;border-radius: 75px">
                        <h4 class="text-center"><span>${player.playerName} </span> 歌手</h4>
                    </div>
                    </c:if>
                </c:forEach>

            </div>
            <!-- Left and right controls -->
            <a class="left carousel-control" href="#myCarousel1" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#myCarousel1" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
</section>
<!-- /testimonial section -->


<div class="body-cont">
    <div class="container">
        <h3>参与投票</h3>
        <div class="grid_v">
        <c:if test="${matchPkInfo.firstPlayer==null and matchPkInfo.secondPlayer==null}">
               <p  style="font-size: 40px;color: maroon;font-weight: bolder;letter-spacing: 15px;text-align: center;">暂无开启的投票</p>
        </c:if>
        <c:if test="${matchPkInfo.firstPlayer!=null and matchPkInfo.secondPlayer!=null}">



                <ul>
                    <li class="col-md-3 re-size1" style="width: 450px;height:500px;">
                            <%--matchPkInfo查出来的数据的返回值要是matchPkInfo这个才行--%>
                        <img id="firstPlayer.playerImage" src="${matchPkInfo.firstPlayer.playerImage}" width="500" height="300" alt="/" class="zoom-img"/>
                        <div class="grid-txt">
                            <h4>${matchPkInfo.firstPlayer.playerName}</h4>
                            <p>${matchPkInfo.firstPlayer.playerInfo}</p>
                            <div class="btn btn-default re-clr1" style="width:100px;background: none;
                        height:32px;margin-right: 20px;padding: 0px;margin-left: 40px;">
                                <div style="height: 32px;width: 30px;float: left;">
                                    <img src="${ctx}/static/images/fire.png" alt="fire" width="30" height="32">
                                </div>
                                    <%--<div style="height: 32px;width: 70px;float: left;color: orange;line-height: 32px;text-align: left;">--%>
                                    <%--${matchPkInfo.player.voteNumber}票--%>
                                    <%--</div>--%>

                                <div style="height: 32px;width: 70px;float: left;color: orange;line-height: 32px;text-align: left;">
                                    <span id="span1">${matchPkInfo.firstTicketCount}</span>票
                                </div>
                                <input type="hidden" id="battleId" value="${matchPkInfo.battleId}">
                                <input type="hidden" id="matchId" value="${matchPkInfo.matchId}">
                            </div><button  flag="0" playerId="${matchPkInfo.firstPlayerId}"  type="button" class="btn btn-default re-clr1 submit">投Ta一票</button>
                        </div>
                    </li>

                    <li class="col-md-3 re-size1" style="width: 200px;height:150px;margin-top: 70px;">
                        <img src="${ctx}/static/images/pk.png" alt="/" width="200" height="150"  class="zoom-img"/>

                    </li>


                    <li class="col-md-3 re-size1" style="width: 450px;height:500px;">
                        <img src="${matchPkInfo.secondPlayer.playerImage}" alt="/" width="500" height="300"  class="zoom-img"/>
                        <div class="grid-txt">
                            <h4>${matchPkInfo.secondPlayer.playerName}</h4>
                            <p>${matchPkInfo.secondPlayer.playerInfo}</p>
                            <div class="btn btn-default re-clr1" style="width:100px;background: none;
                        height:32px;margin-right: 20px;padding: 0px;margin-left: 40px;">
                                <div style="height: 32px;width: 30px;float: left;">
                                    <img src="${ctx}/static/images/fire.png" alt="fire" width="30" height="32">
                                </div>
                                <div style="height: 32px;width: 70px;float: left;color: orange;line-height: 32px;text-align: left;">
                                    <span id="span2">${matchPkInfo.secondTicketCount}</span>票
                                </div>

                            </div>
                            <button type="button"  flag="1" playerId="${matchPkInfo.secondPlayerId}" class="btn btn-default re-clr1 submit">投Ta一票</button>
                        </div>
                    </li>

                    <div class="clearfix"></div>
                </ul>


        </c:if>
        </div>
    </div>

    <%--第二层展示选手图片--%>
    <div class="container" style="margin-top: 50px;">
        <h3>排行榜</h3>
        <div class="grid_v">
            <ul>
                <c:forEach items="${playerList}" var="player" varStatus="index">


                <li class="col-md-3 re-size1">
                    <img src="${player.playerImage}" alt="/" class="zoom-img"/>
                    <div class="grid-txt">
                        <h4>${player.playerName}</h4>
                        <p class="shuoming1">${player.playerInfo}</p>

                        <div class="btn btn-default re-clr1" style="width:100px;background: none;
                        height:32px;margin-right: 20px;padding: 0px;margin-left: 40px;">
                            <div style="height: 32px;width: 30px;float: left;">
                                <img src="${ctx}/static/images/jiangbei.png" alt="fire" width="30" height="32">
                            </div>
                            <div style="height: 32px;width: 70px;float: left;color: orange;line-height: 32px;text-align: left;">
                                    ${player.voteNumber}票
                            </div>
                        </div>
                        <button type="button" class="btn btn-default re-clr1" style="background: deepskyblue;">第${index.index+1}名</button>
                    </div>
                </li>

                </c:forEach>

                <div class="clearfix"></div>
            </ul>
        </div>
    </div>


</div>

<!-- partners section -->
<section class="partners">
    <div class="container">
        <h3 class="text-center">合作伙伴</h3>
        <p class="text-center">专注 高效 影响力 只为更懂你</p>
        <div class="sliderfig">
            <ul id="flexiselDemo1">
                <li>
                    <img src="${ctx}/static/images/part-img7.jpg" alt="w3layouts" title="w3layouts" class="img-responsive" />
                </li>
                <li>
                    <img src="${ctx}/static/images/part-img6.jpg" alt="w3layouts" title="w3layouts" class="img-responsive" />
                </li>
                <li>
                    <img src="${ctx}/static/images/part-img4.jpg" alt="w3layouts" title="w3layouts" class="img-responsive" />
                </li>
                <li>
                    <img src="${ctx}/static/images/part-img3.jpg" alt="w3layouts" title="w3layouts" class="img-responsive" />
                </li>
                <li>
                    <img src="${ctx}/static/images/part-img2.jpg" alt="w3layouts" title="w3layouts" class="img-responsive" />
                </li>
                <li>
                    <img src="${ctx}/static/images/part-img5.png" alt="w3layouts" title="w3layouts" class="img-responsive" />
                </li>
                <li>
                    <img src="${ctx}/static/images/part-img1.jpg" alt="w3layouts" title="w3layouts" class="img-responsive" />
                </li>
            </ul>
        </div>
    </div>
</section>
<!-- /partners section -->
<!-- footer section -->
<section class="footer">
    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-md-4 footer-w3ls1">
                <h3>我们的优势</h3>
                <p class="footer-p1">
                    1.是任何一次商演（时间短、影响范围小）、电视（投入大，效果不明显）
                    或者户外广告（不能快速吸引消费者眼球）在投入产出效率上都难以企及的。  
                </p>
                <p class="footer-p1">2.迅速提升活动商家的广告价值，降低商家广告成本，提高知名度以及美誉度。
                <p class="footer-p1">
                    3.网络投票的主要目的就是人群放大：通过网络投票，可以吸引大量的选手及相关亲友的关注，
                    通过以往的数据统计，一名选手参与投票，会带动60人参与。这样可以最大程度的向客户展现实力，扩大社会影响力。</p>
            </div>
            <div class="col-lg-4 col-md-4 footer-w3ls2">
                <h3>发布投票/提供赞助</h3>
                <p class="footer-p1">举办投票活动或提供赞助，请联系我们，专业团队为您服务</p>
                <div class="sub-w3ls">
                    <form action="#" method="post">
                        <div class="form-group">
                            <label for="inputEmail1" class="col-lg-4 control-label"></label>
                            <input type="email" name="email" class="form-control" id="inputEmail1" placeholder="Email" required>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn-outline">订阅</button>
                        </div>
                    </form>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 footer-w3ls3">
                <h3>社交方式/分享</h3>
                <ul class="social-icons">
                    <li><a href="#"><i class="fa fa-facebook"></i>Facebook（脸盆网）</a></li>
                    <li><a href="#"><i class="fa fa-twitter"></i>Twitter（推特）</a></li>
                    <li><a href="#"><i class="fa fa-linkedin"></i>Linkedin（领英）</a></li>
                    <li><a href="#"><i class="fa fa-google-plus"></i>Googleplus（谷歌）</a></li>
                </ul>
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="col-lg-7 copy-w3ls1">
                <ul class="nav-links">
                    <li><a href="index.jsp">首页</a></li>
                    <li><a href="#">投票活动</a></li>
                    <li><a href="#">登陆</a></li>
                    <li><a href="#">注册</a></li>
                    <li><a href="contact.jsp">关于我们</a></li>
                </ul>
            </div>
            <div class="col-lg-5 copy-w3ls2">
                <p class="copyright">Copyright &copy; 2018.Company name All rights reserved.More Templates <a href="#" target="_blank" >生命蓝在线投票系统</a> - Collect from <a href="#" title="效率 高效 影响力" target="_blank">生命蓝</a></p>
            </div>
        </div>
    </div>
</section>
<!-- back to top -->
<a href="#0" class="cd-top">Top</a>
<!-- /back to top -->
<!-- js files -->
<script src="${ctx}/static/js/jquery.min.js"></script>
<script src="${ctx}/static/layui-v2.3.0/layui/layui.js"></script>
<script src="${ctx}/static/js/bootstrap.min.js"></script>
<script src="${ctx}/static/js/SmoothScroll.min.js"></script>
<!-- js for back to top -->
<script src="${ctx}/static/js/top.js"></script>
<!-- /js for back to top -->
<!-- js for navigation -->
<script>
    //  The function to change the class
    var changeClass = function (r,className1,className2) {
        var regex = new RegExp("(?:^|\\s+)" + className1 + "(?:\\s+|$)");
        if( regex.test(r.className) ) {
            r.className = r.className.replace(regex,' '+className2+' ');
        }
        else{
            r.className = r.className.replace(new RegExp("(?:^|\\s+)" + className2 + "(?:\\s+|$)"),' '+className1+' ');
        }
        return r.className;
    };

    //  Creating our button in JS for smaller screens
    var menuElements = document.getElementById('menu');
    menuElements.insertAdjacentHTML('afterBegin','<button type="button" id="menutoggle" class="navtoogle" aria-hidden="true"><i aria-hidden="true" class="icon-menu"> </i> Menu</button>');

    //  Toggle the class on click to show / hide the menu
    document.getElementById('menutoggle').onclick = function() {
        changeClass(this, 'navtoogle active', 'navtoogle');
    }

    document.onclick = function(e) {
        var mobileButton = document.getElementById('menutoggle'),
            buttonStyle =  mobileButton.currentStyle ? mobileButton.currentStyle.display : getComputedStyle(mobileButton, null).display;

        if(buttonStyle === 'block' && e.target !== mobileButton && new RegExp(' ' + 'active' + ' ').test(' ' + mobileButton.className + ' ')) {
            changeClass(mobileButton, 'navtoogle active', 'navtoogle');
        }
    }
</script>
<!-- /js for navigation -->
<!-- js for about section -->
<script src="${ctx}/static/js/slideshow.js"></script>
<!-- /js for about section -->
<!-- js for stats section -->
<script type="text/javascript" src="${ctx}/static/js/numscroller-1.0.js"></script>
<!-- /js for stats section -->
<script type="text/javascript">
    $(window).load(function() {


//限制字符个数
            $(".shuoming1").each(function(){
                var maxwidth=50;
                if($(this).text().length>maxwidth){
                    $(this).text($(this).text().substring(0,maxwidth));
                    $(this).html($(this).html()+"...");
                }
            });


        $("#flexiselDemo1").flexisel({
            visibleItems: 4,
            animationSpeed: 1000,
            autoPlay: true,
            autoPlaySpeed: 3000,
            pauseOnHover: true,
            enableResponsiveBreakpoints: true,
            responsiveBreakpoints: {
                portrait: {
                    changePoint:480,
                    visibleItems: 1
                },
                landscape: {
                    changePoint:640,
                    visibleItems:2
                },
                tablet: {
                    changePoint:768,
                    visibleItems: 3
                }
            }
        });
        layui.use(['layer'], function(){
            var layer=layui.layer;
            var $=layui.jquery;
            var battleId=$("#battleId").val();
            var matchId=$("#matchId").val();
        $(".submit").click(function () {
            var playerId=$(this).attr("playerId");
            var flag=$(this).attr("flag");
            var _this=this;
            $.post("${ctx}/vote/vote",{
                "battleId":battleId,
                "matchId":matchId,
                "playerId":playerId,
                "flag":flag
            },function (data) {
                if(data.flag=="0"){
                    layer.confirm('投票需要登录，是否前往登录页面？', {
                        btn: ['确定','取消'] //按钮
                    }, function(){
                        window.location.href="${ctx}/user/toLogin"
                    }, function(){

                    });

                }
                if(data.flag=="1"){
                    layer.alert("你已投票本次对决！",{icon:2})
                }
                if(data.flag=="2"){
                    if(flag=="0"){
                     var number=$("#span1").html();
                     number=parseInt(number)+1;
                        $("#span1").html(number);
                    }
                    if(flag=="1"){
                        var number=$("#span2").html();
                        number=parseInt(number)+1;
                        $("#span2").html(number);
                    }
                    layer.alert("投票成功！",{icon:1})
                }
            })
        });

            setInterval(function () {
                window.location.reload();
            },40000)
        });


    });
</script>
<script type="text/javascript" src="${ctx}/static/js/jquery.flexisel.js"></script>
<!-- /js files -->
</body>
</html>